<!DOCTYPE html>
<meta charset="UTF-8">
<title>下拉</title>
<link rel="import" href="../../common/layout.html">

<style>
	.group {
		display: flex;
	}
	.group + .group {
		margin-top: 1em;
	}
	h1 {
		margin-top: 0 !important;
		padding-top: 20px;
		padding-left: 20px;
	}
	.demo {
		flex: 1;
		margin: .5em;
	}
	[cc-dropdown-panel] {
		width: 150px;
		padding: .5em;
		border: solid 1px #ccc;
	}
}
</style>

<main ng-app="demoApp" ng-controller="DemoCtrl as ctrl">
	<h1>下拉</h1>
	<div style="display: flex;">
		<div class="demo">
			<div style="height: 50px;">
				<textarea class="log" style="width: 100%">1号下拉回调日志: </textarea>
			</div>
			<cc-dropdown on-dropdown-open="ctrl.log('打开')" on-dropdown-close="ctrl.log('关闭')">
				<button cc-dropdown-toggle>1号下拉</button>
				<div cc-dropdown-panel>
					<div>1号辣条</div>
				</div>
			</cc-dropdown>
		</div>
		<div class="demo">
			<div style="height: 50px;">
				<button ng-click="ctrl.setOpenState(!ctrl.isOpen)">2号下拉遥控器</button>
			</div>
			<cc-dropdown auto-close="false" is-open="ctrl.isOpen">
				<button cc-dropdown-toggle>2号下拉</button>
				<div cc-dropdown-panel>
					<div>2号辣条</div>
				</div>
			</cc-dropdown>
		</div>
	</div>
</main>

<script src="/components.js"></script>
<script>
	angular.module('demoApp', ['ccms.components'])
		.controller('DemoCtrl', DemoCtrl);

	DemoCtrl.$inject = [];
	function DemoCtrl() {

		this.log = (text) => {
			textAreaEl = document.querySelector('textarea.log');
			textAreaEl.value += text + ',';
		};
		this.isOpen = false;
		this.setOpenState = (openState) => {
			this.isOpen = openState;
		};
	}
</script>

